<template>
	<view class="count-down-time-main-box">
		<view class="time-download">
			<view class="time-icon-box">
				<image class="icon" mode="widthFix" :src="getBaseImagePath"></image>
			</view>
			<view class="title">
				活动即将结束
			</view>
			<view class="time-box">
				<!-- <view class="box">{{ timeData.hour }}</view>
				<view class="split">:</view> -->
				<view class="box">{{ timeData.minute }}</view>
				<view class="split">:</view>
				<view class="box">{{ timeData.second }}</view>
				<view class="split">:</view>
				<view class="box">{{ timeData.milliseconds }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeData: {
					lastTime: 0,
					hour: 23,
					minute: 59,
					second: 59,
					milliseconds: 100
				},
				showTimeIntervalId: 0,
			}
		},
		props: ['baseImagePath'],
		computed: {
			getBaseImagePath() {
				return this.baseImagePath + 'time-icon.png'
			}
		},
		mounted() {
			this.initShowTimeMethod()
		},
		methods: {
			initShowTimeMethod() {
				let lastTime = new Date();
				// lastTime.setHours(23);
				// lastTime.setMinutes(59);
				// lastTime.setSeconds(59);
				lastTime.setMinutes(lastTime.getMinutes() + 5)

				this.timeData.lastTime = lastTime.getTime();
				setInterval(() => {
					this.showTimeMethod();
				}, 10);
			},
			showTimeMethod() {
				var currentDate = new Date(); // 获取当前时间
				var time_now = currentDate.getTime();
				var time_distance = this.timeData.lastTime - time_now; // 结束时间减去当前时间
				var int_day, int_hour, int_minute, int_second, int_milliseconds;
				if (time_distance >= 0) {
					// 天时分秒换算
					int_day = Math.floor(time_distance / 86400000)
					time_distance -= int_day * 86400000;
					int_hour = Math.floor(time_distance / 3600000)
					time_distance -= int_hour * 3600000;
					int_minute = Math.floor(time_distance / 60000)
					time_distance -= int_minute * 60000;
					int_second = Math.floor(time_distance / 1000)
					int_milliseconds = currentDate.getMilliseconds()


					// 时分秒为单数时、前面加零站位
					if (int_hour < 10)
						int_hour = "0" + int_hour;
					if (int_minute < 10)
						int_minute = "0" + int_minute;
					if (int_second < 10)
						int_second = "0" + int_second;
					if (int_milliseconds > 100)
						int_milliseconds = parseInt(int_milliseconds / 10);

					// 显示时间
					// time_d.innerHTML = int_day;
					this.timeData.hour = int_hour;
					this.timeData.minute = int_minute;
					this.timeData.second = int_second;
					this.timeData.milliseconds = int_milliseconds;
				} else {
					clearInterval(this.showTimeIntervalId)
					this.timeData.minute = '00';
					this.timeData.second = '00';
					this.timeData.milliseconds = '00';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-download {
		display: flex;
		justify-content: center;
		align-items: center;

		.icon {
			width: 39rpx;
			height: auto;
			display: block;
		}

		.title {
			margin: 0 17rpx;

			font-family: Source Han Sans CN;
			font-weight: 500;
			font-size: 36rpx;
			color: #E60405;

			// >view {
			// 	border-bottom: solid 0.8rem #ffed8b;
			// 	display: inline-block;
			// 	height: 2.1rem;
			// }
		}

		.time-box {

			display: flex;
			align-items: center;

			.box {
				width: 46rpx;
				height: 46rpx;
				line-height: 46rpx;
				background: #E60405;
				border-radius: 5rpx;

				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;

			}

			.split {
				height: 46rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 36rpx;
				color: #E60405;
				margin: 0 7rpx;
				display: flex;
				align-items: center;
			}

		}
	}
</style>